<template>
  <div>
    <c-model v-model="show" title="赠送优惠券" width="454">
      <div class="give-model">
        <div class="give-header">
          <div class="title fz-16 bold">我要赠送好友</div>
          <div class="desc flex row-center mt-12">
            <div class="label mr-10">{{ typeOptions[form.type] }}</div>{{ form.name }}
          </div>
          <div class="input">
            <input type="text" v-model="form.toMemberNumber" placeholder="请输入好友会员号" maxlength="18">
            <Button type="primary" :disabled="!form.toMemberNumber.trim()" @click="submit">确定</Button>
          </div>
        </div>
        <div class="content mt-16">
          <div class="bold color-black mb-12">常转赠人</div>
          <div class="list">
            <div class="item" v-for="(item,index) in oftenMemeber" :key="index">
              <div class="user-info flex-1 mr-20">
                <div class="bold fz-14 color-black">{{ item.name }}</div>
                <div class="color-gray fz-12">{{ item.memberNumber }}</div>
              </div>
              <div>
                <Button type="primary" @click="selectMember(item)">转赠TA</Button>
              </div>
            </div>
          </div>
        </div>
      </div>
      <span slot="footer"></span>
    </c-model>
    <giveSubmit v-model="confirmShow"
                :type="form.type"
                :title="form.name"
                :memberName="form.toMemberName"
                :memberNumber="form.toMemberNumber"
                @submit="doGiving"/>
  </div>
</template>
<script>
import {givenOnCoupon, givingRegular} from "@/api/wallet";
import {checkCardNumber} from "@/common/utils";
import giveSubmit from "./giveSubmit.vue";
import {mapGetters} from "vuex";
export default {
  name: "index",
  components: {giveSubmit},
  props: {
    value: {type: Boolean, default: true},
    source: {type: Number|String, default: ''},
    coupon: {type: Object, default: () => {return {}}}
  },
  data() {
    return {
      typeOptions: {
        0: '网费',
        1: '充值券',
        2: '饮品券',
        3: '权益卡',
        4: '餐食券',
        5: '上网券',
        6: '包时卡'
      },
      form: {
        toMemberNumber: '',
        toMemberName: ''
      },
      oftenMemeber: [],
      confirmShow: false
    }
  },
  computed: {
    ...mapGetters(['memberId']),
    show: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  methods: {
    getRegular() {
      givingRegular({memberId: this.memberId}).then(res => {
        this.oftenMemeber = res.data.list
      })
    },
    selectMember(item) {
      this.form = {
        ...this.form,
        toMemberName: item.name,
        toMemberNumber: item.memberNumber,
      }
    },
    submit() {
      if (!this.form.toMemberNumber) {
        this.$Message.error('请输入好友会员卡号')
        return
      }
      if (checkCardNumber(this.form.toMemberNumber)){
        this.$Message.error('请输入正确的卡号')
        return
      }
      this.confirmShow = true
    },
    doGiving() {
      if (this.givingLoading) return
      this.givingLoading = true
      givenOnCoupon(this.form).then(res => {
        if (res.code != 200) {
          this.$Message.error(res.msg || '赠送失败')
          return
        }
        this.$Message.success('赠送成功')
        this.givingShow = false
        this.confirmShow = false
        this.show = false
        this.$emit('success')
      }).finally(() => {
        this.givingLoading = false
      })
    }
  },
  created() {
  },
  watch: {
    show(val) {
      if (val) {
        let form = {
          fromMemberId: this.memberId,
          toMemberNumber: '',
        }
        if (this.source == 1) { // 赠送优惠券
          form = {
            ...form,
            memberCouponId: this.coupon.couponId,
            name: this.coupon.name,
            title: this.coupon.title,
            type: this.coupon.type
          }
        } else if (this.source == 2) { // 包时卡
          form = {
            ...form,
            memberCouponId: this.coupon.id,
            name: this.coupon.name,
            title: 0,
            type: 6
          }
        }
        this.form = form
        this.getRegular()
      }
    }
  }
}
</script>

<style scoped lang="scss">
.give-model {
  &:after {
    content: "";
    position: absolute;
    top: 0;
    height: 240px;
    left: 0;
    background: url("~@/assets/images/wallet/give-mask.png") no-repeat center center / cover;
    width: 100%;
  }
  button {
    height: 22px;
    line-height: 22px;
    font-size: 12px;
    border-radius: 11px;
  }
  .give-header {
    text-align: center;
    position: relative;
    z-index: 1;
    .desc {
      color: $-color-brown;
      font-weight: bold;
      font-size: 16px;
      .label {
        height: 23px;
        line-height: 23px;
        background: linear-gradient( 134deg, #FFE925 0%, #FFD800 100%);
        border-radius: 4px;
        padding: 0 7px;
        margin-right: 8px;
        font-size: 14px;
        font-weight: 400;
      }
    }
    .input {
      height: 48px;
      border-radius: 8px;
      border: 1px solid #F3D0A7;
      display: flex;
      align-items: center;
      background-color: #fff;
      padding-right: 16px;
      margin-top: 16px;
      overflow: hidden;
      input {
        flex: 1;
        height: 100%;
        line-height: 96rpx;
        padding: 12px 16px;
        text-align: left;
        border: none!important;
        outline: none;
      }
    }
  }
  .content {
    position: relative;
    z-index: 1;
    .list {
      overflow: auto;
      .item {
        background-color: #F7F7F7;
        padding: 12px 20px;
        border-radius: 8px;
        @include flex-center();
        margin-bottom: 8px;
        line-height: 22px;
        .user-info {
          flex: 1;
        }
      }
    }
  }
}
</style>
